<template>
  <a-form :form="form" class="login-form" @submit="handleSubmit">
    <a-form-item>
      <a-input v-decorator="[
        'username',
        {
          rules: [{ required: true, message: '请输入用户名!' }],
        },
      ]" placeholder="用户名">
        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-input v-decorator="[
        'password',
        {
          rules: [{ required: true, message: '请输入密码!' }],
        },
      ]" type="password" placeholder="密码">
        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
      </a-input>
    </a-form-item>
    <a-form-item>
      <a-checkbox v-decorator="[
        'remember',
        {
          valuePropName: 'checked',
          initialValue: true,
        },
      ]">记住我</a-checkbox>
      <a class="login-form-forgot" href>忘记密码</a>
      <a-button type="primary" html-type="submit" class="login-form-button">登录</a-button>
      <a href="/register">注册</a>
    </a-form-item>
  </a-form>
</template>

<script>
import { login } from "@/api/login"
import { SET_USERINFO } from "@/types/mutation-types";
export default {
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "normal_login" });
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("表单里输入的值: ", values);
          var { username, password } = values;
          login(username, password)
            .then((res) => {
              console.log('res', res);
              let { name, age, nickName, ageIternet } = res;
              this.$message.info(`欢迎--${name}--登录！恭喜${age}岁,你的昵称为${nickName},网龄已经${ageIternet}个月`);
              window.console.log(SET_USERINFO)
              this.$store.dispatch("user/" + SET_USERINFO, {
                name,
                age,
                nickName,
                ageIternet,
              });
              this.$router.push({ path: "home" });
            }).catch((error) => {
              console.log('error', error);
              this.$message.error("登录失败！");
            })
        }
      });
    },
  },
};
</script>
<style>
.login-form {
  max-width: 300px;
  margin: auto !important;
}

.login-form-forgot {
  float: right;
}

.login-form-button {
  width: 100%;
}
</style>

